<template>
    <div class="lja">
        <div class="comment-body">
            <div class="comment-body-item-img">
                <img :src="showavatarUrl">
            </div>
            <div class="comment-body-item-text">
                <div class="comment-body-item-text-head">
                    <p class="comment-body-item-text-head-name">{{commentItem.user.nickname}}</p>
                    <p class="comment-body-item-text-head-data">{{showtime}}</p>
                </div>
            </div>
        </div>
        <p class="comment-body-item-text-end">{{commentItem.content}}</p>
    </div>
</template>

<script>
    import {formatDate} from "@/utils821/utils821"
    export default {
        name: "DetailCommentItem",
        props:{
            commentItem:{
                type:Object,
                default(){
                    return{}
                }
            }
        },
        computed:{
            showavatarUrl(){

                // console.log(this.commentItem.avatarUrl);
                return this.commentItem.user.avatarUrl
            },
            showtime(){
                var date=this.commentItem.time*1
                return formatDate(date,"yyyy-MM-dd")
            }
        }
    }
</script>

<style scoped>
    .comment-body-item-img{
        width: 25px;
        margin-right: 8px;
    }
    .lja{margin-top: 15px;border-bottom: 1px solid #f6f6f6}
    .comment-body-item-img img{width: 100%}
    .comment-body{display: flex;margin-left: 10px;width: 100%;height: 40px}
    .comment-body-item-text{width: 100%}
    .comment-body-item-text-head{display: flex;margin-bottom: 3px}
    .comment-body-item-text-head-name{white-space: nowrap;font-size: 10px}
    .comment-body-item-text-head-data{font-size: 13px;position: absolute;right: 15px}
    .comment-body-item-text-end{font-size: 12px;font-family: "微软雅黑";position: relative;bottom: 15px;
        font-weight: 600;width: 80%;margin-top:0px;margin-left: 40px}
</style>